<template>
  <div class="smsContainer">
    <el-form-item label="手机号">
      <el-input
        maxlength="11"
        class="captch phone"
        v-model="phoneNumber"
      ></el-input>
      <span
        class="captcha-svg"
        style="
          color: red;
          line-height: 45px;
          text-decoration: underline;
          font-weight: 900;
        "
        @click="sendSms"
      >
        {{ msg }}
      </span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="code"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form-item>
    <!-- 阿里图标 -->
    <!-- <span class="iconfont icon-shuyi_erweima"></span> -->
  </div>
</template>

<script>
import * as api from "../../api/users";
export default {
  props: ["storageUserInfo"],
  data() {
    return {
      msg: "点击发送验证码",
      flag: true,
      phoneNumber: "",
      code: "",
    };
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        this.flag = false;
        // 调用接口,发送验证码
        let res = await api.getSmsCode(this.phoneNumber);
        //如果短信发送成功
        if (res.data.state) {
          this.$message({
            message: "短信发送成功",
            type: "success",
          });
        } else {
          this.$message.error(res.data.msg);
        }
        // console.log(res);
        let delay = 5;
        this.msg = `(5)秒后重新发送`;
        this.interval = setInterval(() => {
          delay--;
          if (delay < 1) {
            this.msg = "点击发送验证码";
            clearInterval(this.interval);
            this.flag = true;
          } else {
            this.msg = `(${delay})秒后重新发送`;
          }
        }, 1000);
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      // console.log(res);
      // 调用父组件方法存储用户信息
      this.storageUserInfo(res.data);
      // 跳转页面
      this.$router.push("/");
    },
  },
};
</script>

<style lang="less" scoped>
.captcha-svg {
  position: absolute;
  top: 0;
  right: 10px;
  cursor: pointer;
  user-select: none;
}
.iconfont {
  font-size: 60px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
</style>
